<template>
     <div class="jx-big">    
        <div class="jx-info">
            <h3 class="fl">申请账号</h3>
        </div>
        <div class="forms">
            <el-form :model="formDtae" :rules="rules" ref="formDtae" >
                <el-form-item label="名称"  prop='name'>
                    <el-input v-model="formDtae.name"  placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="省份" class='fl' prop='classinfo' >
                    <el-select v-model="formDtae.classinfo"  placeholder="请选择省份">
                        <el-option
                        v-for="item in formDtae.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div style="clear:both">
                    <el-form-item label="申请码"  prop='code' >
                        <el-input v-model="formDtae.code"  placeholder="请输入申请码"></el-input>
                    </el-form-item>
                </div>
                <div class="button-style savefn" @click="saveFn('formDtae')" >保 存</div>
            </el-form>
        </div>
        <el-dialog title="申请账号" :visible.sync="dialogFormVisible" width="550px" >
            <div id="spanid">
                <p>大数据教学资源及实验管理系统</p>
                <p>地址：http://111.40.26.62:50003/SchoolMS/</p>
                <p>地址：http://111.40.26.62:50003/SchoolMS/</p>
                <p>地址：http://111.40.26.62:50003/SchoolMS/</p>
            </div>
            <div class="cpoy">
                 <button @click="savetext"> 复制</button>
            </div>
         </el-dialog>
    </div>
</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        components: {
            NotificationNav
        },
        data () {
            return {
                dialogFormVisible:false,
                 formDtae:{
                      name:'',
                      code:'',
                      classinfo:'',
                      options:[{
                        value: '选项1',
                        label: '黄金糕'
                        }, {
                        value: '选项2',
                        label: '双皮奶'
                        }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }]
                 },
                 rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    classinfo: [
                        { required: true, message: '请选择活省份', trigger: 'change' }
                    ],
                 }
            }      
        },
        created () {
            
        },
        methods: {
            //保存
            saveFn(){
               this.dialogFormVisible=true
            },
            //复制
            savetext(){
               var Url2=document.getElementById("spanid").innerText;
                var oInput = document.createElement('textarea');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display='none';
                //alert('复制成功');
            }

        }
    }
</script>
<style scoped>
   .el-input>>>.el-input__inner{
        width: 250px;
        height: 38px;
        line-height: 38px;
    }
   .el-select>>>.el-input__inner{
       width: 250px;
        height: 38px;
        line-height: 38px;
   }
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
    }
    .forms{
        margin: 28px 0;
        .savefn{
            margin:20px 30px 20px 0;
        }
    }
    #spanid{
        text-align: center;
        &>p{
            line-height: 30px;
        }
    }
    .cpoy{
        text-align: center
    }
     
}
</style>